<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一隅立画</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="./css/workstrack.css"/>
		<link rel="stylesheet" type="text/css" href="./css/sidebar.css"/>
		<link rel="stylesheet" type="text/css" href="./css/basestyle.css"/>
		<script src="js/head.js" type="text/javascript"></script>
		<script src="js/xshead.js" type="text/javascript"></script>
		<script src="js/base.js"></script>
	</head>
	<body>
		<!-- 详情 -->
		<div class="content">
			<div class="container">
				<div class="row">
					<div id="worksitem" class="col-lg-8 col-md-8">
						<div ref="hidesider" style="display: none;">
							<div class="workstrack">
								<div class="workstracktitle">
									<p>作品追踪</p>
								</div>
								<div class="workstracklist">
									<div class="workstrackitem col-lg-6" v-for="(works, index) in workslist" @click="openworkdetail(works.id)">
										<div class="workstrackitemup">
											<img :src="works.image">
											<div class="workstrackitemupdianzan">
												<div class="workstrackitemupdianzanicon" @click.stop="changstatus(index, works.id, works.likestatus)">
													<img v-show="works.likestatus == 0" src="./images/dainzan_icon.png" >
													<img v-show="works.likestatus == 1" src="./images/dianzan_icon_hover.png" >
												</div>
												<div class="">
													<span>{{works.like}}</span>
												</div>
											</div>
										</div>
										<div class="workstrackitemdown">
											<div class="workstrackitemdowntitle">
												<p>{{works.sheji_competition_title}}</p>
											</div>
											<div class="workstrackitemdownworker">
												<div class="workstrackitemdownworkerone">
													<div class="workstrackitemdownworkeronetxt">
														<p>发布者:</p>
													</div>
													<div class="workstrackitemdownworkeronetxtinfo">
														<div class="workstrackitemdownworkeronetxtinfoimg">
															<img :src="works.avatar">
														</div>
														<div class="workstrackitemdownworkeronetxtinfoname">
															<p>{{works.nickname}}</p>
														</div>
													</div>
												</div>
												<div class="workstrackitemdownworkerone">
													<div class="workstrackitemdownworkeronetxt">
														<p>设计者:</p>
													</div>
													<div class="workstrackitemdownworkeronetxtinfo">
														<div class="workstrackitemdownworkeronetxtinfoimg">
															<img :src="works.designeravatar">
														</div>
														<div class="workstrackitemdownworkeronetxtinfoname">
															<p>{{works.designer}}</p>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="empty" v-show="workslist.length<1">
										<img src="./images/empty.png" >
									</div>
									<div class="clear"></div>
								</div>
								<div>
									<div class="judgepopup" v-show="tanchuang==1">
										<div class="judgepopupnav">
											<div class="judgepopupwarp">
												<div class="judgepopupwarpup">
													<img src="./images/revoke_logo.png">
												</div>
												<div class="judgepopupwarpdown">
													<div class="judgepopupwarptxt">
														<p>您还未登录，请先登录在进行收藏吧!</p>
													</div>
													<div class="judgepopupwarpbtn">
														<div class="judgepopupwarpbtnitem judgepopupwarpbtnactive" @click="closetipopup">
															<p>好的</p>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="fenye" v-show="pagenum>1">
									<ul>
										<li class="fenyeitem" @click="getcur(nowpage-1 == 0?1:nowpage-1)"><img src="./images/prve_icon.png" ></li>
										<li v-for="item in pagenum" @click="getcur(item)" :class="{showeffect :item ==nowpage?true:false}">{{item}}</li>
										<li @click="getcur(nowpage+1>pagenum?pagenum:nowpage+1)"><img src="./images/next_icon.png" ></li>
										<div class="clear"></div>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div id="raceside" class="col-lg-4 col-md-4">
						<script src="js/racesidebar.js" type="text/javascript"></script>
					</div>
				</div>
			</div>
		</div>
		
		<script src="js/pcFooter.js" type="text/javascript"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
		<script type="text/javascript">
			
			let worksitem = new Vue({
				el:'#worksitem',
				data:{
					status:0,
					statusjudge:false,
					workslist:[],
					userid:'',
					token:'',
					idsLike:'',
					nowpage:1,
					pagenum:'',
					tanchuang:0
				},
				created:function() {
					this.getworkslist()
				},
				mounted:function() {
					let that = this
					if (localStorage.getItem('logininfo')) {
						console.log('isdfksjdf sd')
						let obj = JSON.parse(localStorage.getItem('logininfo'));
						console.log(obj)
						that.loginstatus = 1
						that.userid = obj.userid
						that.token = obj.token
					}
					if (localStorage.getItem('userinfo')) {
						let obj = JSON.parse(localStorage.getItem('userinfo'));
						console.log(obj)
						that.loginstatus = 1
						that.username = obj.nickname
						that.icon = obj.avatar
					}
					that.getworkslist()
					this.$refs.hidesider.style.display = 'block'
					// console.log(this.$refs.popupjiazai.style)
				},
				methods:{
					// 列表
					getworkslist:function(){
						let that = this
						axios.get('http://admin.yiyulihua.com/api/sheji.track/index',{
							params:{
								userid:that.userid,
								token:that.token,
								page:that.nowpage
							}
						})
						.then((res) =>{
							console.log(res)
							if(res.data.code == 1){
								that.workslist = res.data.data.tracklist
								that.pagenum = res.data.data.pagenum
							}
						})
						
					},
					
					// 点赞/取消点赞
					changstatus:function(i, id, type){
						let that = this
						let list = that.workslist;
						if(type == 1) {
							type = 0
						}else if(type == 0) {
							type = 1
						}
						console.log(type)
						axios.get('http://admin.yiyulihua.com/api/sheji.track/like',{
							params:{
								userid:that.userid,
								token:that.token,
								id: id,
								type:type
							}
						})
						.then((res) =>{
							console.log(res);
							if(res.data.code == 1){
								list.forEach((item, index) => {
									if(index == i && item.likestatus == 1) {
										item.likestatus = 0;
										item.like--;
									}else if(index == i && item.likestatus == 0) {
										item.likestatus = 1;
										item.like++
									}
								})
								that.workslist = list
							}else if(res.data.code == 2){
								that.tanchuang = 1
							}
						})
						
						
					},
					
					// 分页
					getcur:function(index){
						let that = this
						that.nowpage = index
						that.getworkslist()
					},
					
					openworkdetail:function(id){
						let that = this
						// console.log(that.workslist[index].id)
						window.location.href = 'workstarckdetail.html?id='+id
					},
					closetipopup:function(){
						this.tanchuang = 0
					}
				}
			})
		</script>
	</body>
</html>
